<template>
  <div class="main">
    <div id="lineChart" class="chartItem"></div>
    <div id="barChart" class="chartItem"></div>
    <div id="pieChart" style="width: 600px; height: 600px;" class="chartItem"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {},
    };
  },
  mounted() {
    //this.$root => app
    console.log(this.echarts);
    let lineChart = this.$echarts.init(document.getElementById("lineChart"));
    // 绘制图表
    lineChart.setOption({
      title: { text: "总用户量" },
      tooltip: {},
      xAxis: {
        data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
      },
      yAxis: {},
      series: [
        {
          name: "用户量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });

    let barChart = this.$echarts.init(document.getElementById("barChart"));
    // 绘制图表
    barChart.setOption({
      title: { text: "总用户量" },
      tooltip: {},
      xAxis: {
        data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
      },
      yAxis: {},
      series: [
        {
          name: "用户量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });

    let pieChart = this.$echarts.init(document.getElementById("pieChart"));
    // 绘制图表
    pieChart.setOption({
      title: { text: "总用户量" },
      tooltip: {},
      legend: {
    orient: 'vertical',
    left: 'right'
  },
      series: [
        {
          name: "用户量",
          type: "pie",
          radius: '50%',
          
          data: [{ value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
      ],
    });
  },
};
</script>

<style scoped>
.main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.chartItem {
  width: 300px;
  height: 300px;
  margin: 20px;
}
</style>